﻿<template>
  <div>
    <el-dialog
      title='管理账号'
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      @open="getInit"
      height="700"
      :before-close="handleClose"
      custom-class="dialog"
      style="padding-top:unset"
      >
      <div ref="filter" class="filter-container" style="margin-bottom: unset;">
        <template>
          <el-input
            v-model="listQuery.emailAddress"
            size="mini"
            placeholder="请填写邮箱开头或结尾"
            style="width: 200px;"
            class="filter-item filter-left"
            clearable
          />
          <el-select
              v-model="listQuery.groupId"
              class="filter-item filter-left"
              placeholder="请选择分组"
              filterable
              size="mini"
            >
              <el-option v-for="item,index in options" :key="index" :label="item.label" :value="item.value"/>
          </el-select>
          <el-button
            size="mini"
            class="filter-item filter-left"
            icon="el-icon-search"
            type="primary"
            style="margin-left:5px"
            plain
            @click="search()"
          >
            搜索
          </el-button>
          <el-button size="mini" class="filter-item filter-left" type="success" style="margin-left:5px" plain @click="handleChangeGroup">批量分组</el-button>
          <el-button size="mini" class="filter-item filter-left" type="danger" style="margin-left:5px" plain @click="batchDelete" :disabled="selection.length <= 0">批量删除</el-button>

          <el-button
            size="mini"
            class="filter-item right filter-left filter-refresh"
            icon="el-icon-refresh"
            type="primary"
            plain
            @click="refresh()"
          />
        </template>
      </div>
      <el-table
          :data="tableData"
          v-loading="listLoading"
          @selection-change="handleSelection"
          border
          style="width: 100%">
          <el-table-column
            align="center"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
              align="center"
              prop="emailAddress"
              label="邮箱账号"
              min-width="180">
          </el-table-column>
          <el-table-column
              align="center"
              label="分组"
              width="180">
            <template slot-scope="scope">
              <template v-for="item in options">
                <template v-if="item['value'] == scope.row.emailConfigGroupId">
                  {{ item.label }}
                </template>
              </template>
            </template>
          </el-table-column>
          <!-- <el-table-column
              align="center"
              label="状态">
              待验证
          </el-table-column> -->
          <el-table-column
              align="center"
              prop="createdAt"
              label="授权时间"
              min-width="100">
          </el-table-column>
          <el-table-column
              align="center"
              label="操作"
              min-width="100">
              <template slot-scope="scope">
                  <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
                  <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="changeGroup(scope.row.id)" disabled>重新验证</el-button>
                  <el-button type="danger" size="mini" plain @click="deleteRow(scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <div style="height:50px;">
        <change-group :show.sync="showChangeGroupVisible" @closeAction="refresh" :id="changeGroupIds" />
        <pagination
          v-show="listQuery.total>0"
          :total="listQuery.total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList()"
        />
      </div>
    </el-dialog>
    <!-- <change-group :id="collectId" :show.sync="showDealState" @closeAction="refresh"/> -->
    <edit-account :show.sync="showEditAccount" :id="id" />
  </div>
</template>

<script>
import { getAction, postAction, getUrlAction, postUrlAction } from '@/api/common'
import ChangeGroup from './changeGroup.vue'
import Pagination from '@/components/Pagination/index.vue'
import EditAccount from '@/views/email/emailSendFree/editAccount'
import { deleteCustomer } from '@/api/customer'

export default {
  name: 'ManageAccount',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  components: {
    EditAccount,
    ChangeGroup,
    Pagination
  },
  inject: ['showProgressDialog'],
  created() {
    this.getList()
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    }
  },
  data: function() {
    return {
      /// /////////////////////////////////////////////////////////////////////////////////
      listQuery: {
        total: 0,
        page: 0,
        limit: 10,
        emailAddress: undefined,
        groupId: undefined
      },
      options: [],
      tableData: [],
      selection: [],
      changeGroupIds: [],
      dialogVisible: this.show,
      listLoading: false,
      /// /////////////////////////////////////////////////////////////////////////////////
      emailGroupOptions: [],
      showChangeGroupVisible: false,
      showEditAccount: false,
      id: 0
    }
  },
  methods: {
    search() {
      this.getList()
    },
    refresh() {
      console.log('刷新啦1')
      this.listQuery = {
        total: 0,
        page: 0,
        limit: 10,
        emailAddress: undefined,
        groupId: undefined
      }
      this.getInit()
      console.log('刷新啦2')
    },
    /// /////////////////////////////////////////////////////////////////////////////////
    handleChangeGroup() {
      if (this.selection.length <= 0) {
        this.$message({
          type: 'info',
          message: '请勾选需要批量分组的邮箱'
        })
        return false
      }
      const ids = this.selection.map(m => m.id)
      console.log(ids)
      this.changeGroupIds = ids
      this.showChangeGroupVisible = true
    },
    handleSelection(val) {
      this.selection = val
    },
    /// /////////////////////////////////////////////////////////////////////////////////
    handleClick(row) {
      console.log(row)
    },
    getInit() {
      this.listLoading = true
      this.getGroupOptions()
      this.getList()
      this.listLoading = false
    },
    getList() {
      getAction(this.listQuery, 'EmailConfig/GetEmailAccountList')
        .then((res) => {
          console.log(res)
          this.tableData = res.data.items
          this.listQuery.total = res.data.total
        })
    },
    getGroupOptions() {
      getAction({}, 'EmailConfigGroup/GetGroupList')
        .then((res) => {
          this.options = res.data
          this.options.push({ label: '暂未分组', value: 0 })
        })
    },
    handleClose() {
      this.$emit('update:show', false)
    },
    edit(row) {
      this.showEditAccount = true
      this.id = row.id
    },
    changeGroup(id) {
      this.showChangeGroupVisible = true
      console.log('changeGroup')
    },
    deleteRow(row) {
      this.$confirm(`确认删除[${row.emailAddress}]?`)
        .then(() => {
          this.deleteEmailConfig(row.id)
            .then(() => {
              this.$message.success('删除成功')
              this.refresh()
            })
        }).catch(() => {})
    },
    deleteEmailConfig(id) {
      return postAction({}, `EmailConfig/Delete/${id}`)
    },
    batchDelete() {
      if (this.selection.length <= 0) {
        this.$message('请选择需要批量删除的数据')
        return false
      }
      const uploadItems = [
        { name: '发送账号', num: this.selection.length, action: this.batchDeleteFunc, data: this.selection }
      ]
      const uploadColumns = [
        { label: '发送账号', key: 'emailAddress' }
      ]
      this.showProgressDialog(uploadItems, uploadColumns, this.refresh, { title: '批量删除，此操作不可逆' })
    },
    batchDeleteFunc({ item, message }) {
      this.deleteEmailConfig(item.id).then((res) => {
        message.success('[' + item.emailAddress + '] 删除成功')
      }).catch((res) => {
        message.failed('[' + item.emailAddress + '] ' + res.message)
      })
    }
  }
}
</script>

<style scoped>
.dialog{
  width: 800px;
}
</style>
